<template>
  <div class="list-wrapper">
    <!-- <filtrate :fetchData="fetchData" :isShow="isShow"></filtrate> -->

    <div class="list-top">
      <div>
          <router-link to="/dashboard/customerFeedback">
            <span>客户反馈</span>
          </router-link>
          <span class="el-icon-arrow-right"></span>
          <span>{{courseName}}</span>
      </div>
      
			<!-- <el-button type="primary">下载</el-button> -->
		</div>



		<table class="list-table" border="0" cellspacing="0" cellpadding="0">
			<thead>
				<tr>
					<th>序号</th>
          <th>客户编号</th>
          <th>全称</th>
					<th>开班日期</th>
					<th>课程评估分</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(item,index) in info">
					<td>{{index+1}}</td>
					<td @click="goCustomerDetail(item.id)">{{item.cnumber}}</td>
          <td @click="goCustomerDetail(item.id)">{{item.name}}</td>
          <td>{{item.startdate}}</td>
					<td @click="openChart(item.id,item.trainingid)">{{item.score}}</td>
				</tr>
			</tbody>
		</table>
    <div class="pop-wrapper" v-show="flag">
      <div class="pop">
        <span class="el-icon-close" @click="flag=false"></span>
        <div id="myChart" style="width:600px;height:400px"></div>
      </div>
    </div>
		<div class="pagination">
      <el-pagination v-if="info.length" @current-change="handleCurrentChange" :current-page="page" :page-size="10" layout="total, prev, pager, next, jumper" :total="total">
      </el-pagination>
      <div class="mess" v-else>暂无数据</div>
    </div>
	</div>
</template>
<script>
import filtrate from "../filtrate";

export default {
  data() {
    return {
      isShow: true,
      page: 1,
      total: 0,
      id: "",
      courseName: "",
      filData: {},
      info: [],
      flag: false,
      myChart: {},
      option: {
        title: {
          text: ""
        },
        tooltip: {},
        toolbox: {
          show: true,
          right: 20,
          feature: {
            saveAsImage: {
              //保存图片
              show: true
            }
          }
        },
        legend: {
          data: []
        },
        radar: {
          name: {
            formatter: text => {
              text = text.replace(/\S{10}/g, function(match) {
                return match + "\n";
              });
              return text;
            }
          },
          indicator: []
        },
        series: [
          {
            name: "客户反馈",
            type: "radar",
            label: {
              normal: {
                show: true,
                formatter: function(params) {
                  return params.value;
                }
              }
            },
            data: []
          }
        ]
      }
    };
  },
  components: {
    filtrate
  },
  methods: {
    fetchData(time, type) {
      let data = {
        time: time ? time : "",
        id: this.id,
        page: this.page
      };
      this.apiPost("Dashboard/customerFeedbackDetail", data).then(res => {
        this.info = res.list;
        this.total = res.total;
      });
    },
    handleCurrentChange(val) {
      this.page = val;
      if (this.filData) {
        this.fetchData(this.filData.time, this.filData.courseType);
      } else {
        this.fetchData();
      }
    },
    goCustomerDetail(id) {
      window.open(SITE + "customer/detail/" + id);
    },
    drawChart() {
      this.myChart = this.$echarts.init(document.querySelector("#myChart"));
      this.myChart.setOption(this.option);
    },
    openChart(id, trainingid) {
      if (this.myChart.showLoading) {
        this.myChart.showLoading("default", { color: "#0177BF" });
      }
      let data = {
        id: id,
        trainingid: trainingid
      };
      this.apiPost("dashboard/customerFeedbackCustomer", data).then(res => {
        this.myChart.hideLoading();
        this.myChart.setOption({
          radar: {
            indicator: res.indocator
          },
          series: [
            {
              data: res.data
            }
          ]
        });
        this.flag = true;
      });
    }
  },
  created() {
    this.id = this.$route.params.id;
    this.courseName = this.$route.params.course;
    this.filData = Lockr.get("filData");
    if (this.filData) {
      this.fetchData(this.filData.time, this.filData.courseType);
    } else {
      this.fetchData();
    }
  },
  mounted() {
    this.drawChart();
    this.myChart.showLoading("default", { color: "#0177BF" });
  }
};
</script>
<style lang="css" scoped>
.container {
  box-sizing: border-box;
  width: 100%;
  background: #ffffff;
  min-height: 100%;
  font-size: 14px;
  overflow: hidden;
}
.el-icon-arrow-right {
  margin: 0 5px;
  font-size: 14px;
}
.pagination {
  text-align: center;
  margin-top: 30px;
}
.mess{
  color: #666;
}
.pop-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  z-index: 9999;
}
.pop-wrapper .pop {
  width: 700px;
  height: 500px;
  background-color: #fff;
  margin: 10% auto;
  position: relative;
  padding-top: 50px;
  box-sizing: border-box;
}
.pop .el-icon-close {
  position: absolute;
  right: 10px;
  top: 10px;
  color: #999;
  cursor: pointer;
}
#myChart {
  margin: 0 auto;
}
</style>
